<template>
  <div class="page">
    <header>
      <div class="forms">
        <div class="sear">
          <span
            ><i @click="City">{{ city.address }}</i
            ><i class="iconfont icon-triangle-down"></i
          ></span>
          <form action="">
            <i class="iconfont icon-fangdajing"></i>
            <input type="text" placeholder="请输入小区或地址" />
          </form>
        </div>
        <i class="iconfont icon-dizhi-01" @click="goMap"></i>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, i) in list" :key="i">
          <img :src="baseUrl + v.imgSrc" alt="" @click="DeImg(v.id)" />
        </van-swipe-item>
      </van-swipe>
    </header>
    <main>
      <div class="house">
        <li>
          <i class="iconfont icon-hezu"></i>
          <span @click="Whole_Lease">整租</span>
        </li>
        <li>
          <i class="iconfont icon-zufang"></i>
          <span @click="goList">合租</span>
        </li>
        <li>
          <i class="iconfont icon-dituzhaofang"></i>
          <span @click="goMap">地图找房</span>
        </li>
        <li>
          <i class="iconfont icon-chuzuwu"></i>
          <span @click="goAdd">出租房</span>
        </li>
      </div>
      <div class="group">
        <div class="top">
          <h3>租房小组</h3>
          <span>更多</span>
        </div>
        <div class="content">
          <dl v-for="(v, i) in rend" :key="i">
            <dd>
              <h3>{{ v.title }}</h3>
              <p>{{ v.desc }}</p>
            </dd>
            <dt>
              <img :src="v.imgSrc" alt="" />
            </dt>
          </dl>
        </div>
      </div>
      <div class="news">
        <div class="top">
          <h3>最新资讯</h3>
          <i></i>
        </div>
        <div class="house_news">
          <dl v-for="val in house" :key="val.id">
            <dt>
              <img :src="val.imgSrc" alt="" />
            </dt>
            <dd>
              <h3>{{ val.title }}</h3>
              <p>
                <span>{{ val.from }}</span
                ><span>{{ val.date }}</span>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      rend: [],
      house: [],
      baseUrl: "http://47.102.145.189:8009",
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    getSwiper() { /// 轮播图
      axios.get("/home/swiper").then((res) => {
        this.list = res.data.body;
      });
    },
    getGroups() { ///租房小组
      axios.get("/home/groups").then((res) => {
        this.rend = res.data.body;
      });
    },
    goAdd() {
      this.$router.push("/rent/add");
    },
    goMap() {
      this.$router.push("/map");
    },
    City() {
      this.$router.push("/citylist");
      console.log("加载到城市页面");
    },
    ///图片详情页
    DeImg(id){
      this.$router.push(`/detail/${id}`)
    },
    goList(){ /// 合租
      this.$router.push('/home/list')
    },
    Whole_Lease(){ ///整租
      this.$router.push('/home/list')
      axios.get('/user/houses').then(res=>{
        console.log(res,'整租');
      })
    }
  },
  created() {
    this.getSwiper();
    this.getGroups();
    axios.get("/home/news").then((res) => {
      this.house = res.data.body;
    })
  },
};
</script>

<style lang='scss' scoped>
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
  header {
    width: 100%;
    height: 3.12rem;
    position: relative;
  }
}
.forms {
  width: 90%;
  height: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.1rem;
  margin-left: 0.2rem;
  position: absolute;
  top: 0.3rem;
  left: 0;
  z-index: 11111;
  .sear {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 0.05rem;
    span {
      width: 1.55rem;
      display: flex;
      padding: 0 0.05rem;
      i {
        color: #000;
        font-style: normal;
      }
    }
    form {
      flex: 1;
      display: flex;
      align-items: center;
      border-radius: 0.05rem;
      i {
        text-align: center;
        color: #000;
      }
      input {
        flex: 1;
        height: 0.55rem;
        border: none;
        outline: none;
      }
    }
  }
  i {
    color: #fff;
  }
}
.van-swipe {
  width: 100%;
  height: 3.12rem;
  img {
    width: 100%;
    height: 100%;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .house {
    width: 100%;
    height: 1.25rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      text-align: center;
      i {
        width: 0.5rem;
        display: block;
        text-align: center;
        font-size: 0.2rem;
        height: 0.4rem;
        color: #fff;
        line-height: 0.4rem;
        background-color: skyblue;
        border-radius: 50%;
        margin: 0.05rem auto;
      }
    }
  }
  .group {
    width: 100%;
    height: 4.6rem;
    margin: 0.1rem 0;
    .top {
      width: 100%;
      height: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.1rem;
    }
    .content {
      width: 100%;
      height: 4rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0 0.1rem;
      dl {
        width: 46%;
        height: 1.9rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        margin: 0.05rem;
        padding: 0 0.15rem;
        dd {
          flex: 1;
          h3 {
            font-weight: normal;
            font-size: 15px;
          }
          p {
            font-size: 13px;
          }
        }
        dt {
          flex: 1;
          img {
            width: 96%;
            height: 1rem;
          }
        }
      }
    }
  }
}
.news {
  width: 100%;
  height: 7rem;
  background-color: #fff;
  .top {
    width: 100%;
    height: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
  }
  .house_news {
    width: 100%;
    height: 2.2rem;
    padding: 0 0.1rem;
    dl {
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      padding: 0.15rem 0.1rem 0.15rem 0;
      border-bottom: 1px solid #e5e5e5;
      dd {
        flex: 1;
        h3 {
          margin-bottom: 0.55rem;
          font-size: 14px;
        }
        p {
          width: 100%;
          color: #9c9fa1;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
        }
      }
      dt {
        width: 2.4rem;
        margin: 0 0.1rem;
        img {
          width: 100%;
          height: 2rem;
        }
      }
    }
  }
}
</style>